<template>
  <div class="searchMain">
     <Form :model="formValidate" label-position="left" :label-width="70">  
        <Row :gutter="15">
                      <Col span="6">
                          <FormItem label="会员卡号">
                              <Input disabled v-model="formValidate.memberCode"></Input>
                          </FormItem>
                      </Col>
                      <Col span="6">
                      <FormItem label="所属单位">
                               <Select v-model="formValidate.company" filterable>
                                  <Option v-for="item in companyList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                              </Select>
                          </FormItem>
                      </Col>
                      <Col span="6">
                              <Button type="primary" @click="">保存</Button>
                      </Col>
                      
          </Row>    
           
     </Form>
      <Table style="margin-top:15px" border :columns="columns1" :data="data1"></Table>
      <div style="margin: 10px;overflow: hidden">
          <div style="float: right;">
              <Page :total="100" :current="1" :page-size="10" show-elevator show-sizer @on-change="changePage"></Page>
          </div>
      </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formValidate: {
        memberCode: "1312312312",
        company: ""
      },
      companyList: [
        {
          value: "0",
          label: "北京精诚博源科技有限公司"
        },
        {
          value: "1",
          label: "北京中油瑞飞科技有限公司"
        }
      ],
      columns1: [
        {
          title: "单位名称",
          align: "center",
          key: "companyName"
        },
        {
          title: "创建人",
          align: "center",
          key: "creater"
        },
        {
          title: "创建时间",
          align: "center",
          key: "creatTime"
        },
        {
          title: "是否有效",
          align: "center",
          key: "isTrue"
        },
        {
          title: "会员权限",
          align: "center",
          key: "action",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.getUrl(params.index);
                    }
                  }
                },
                "会员权限"
              )
            ]);
          }
        }
      ],
      data1: [
        {
          companyName: "中国石油集团",
          creater: "李立志",
          creatTime: "2018-01-12",
          isTrue: "有效"
        }
      ]
    };
  },
  methods: {
    getUrl(id) {
      this.$router.push({
        path: "./memberEdit/membershipAuthority",
        query: { id: id }
      });
    },
    changePage() {}
  }
};
</script>

<style>
.searchMain .ivu-form-item {
  margin-bottom: 10px;
}
</style>
